<template>
  <div class="body_box">
    <div class="from_box">
      <div style="text-align: center">
        <h1>忘记密码</h1>
      </div>
      <div>
        <el-steps :active="step" align-center>
          <el-step title="手机号" description="填入绑定的手机号或者邮箱"/>
          <el-step title="验证码" description="填入发送的验证码结果"/>
          <el-step title="新密码" description="重新设置密码"/>
          <el-step title="完成" description="提交结果"/>
        </el-steps>
      </div>
      <div class="zongxiang">
        <div class="item_center">
          <div v-show="step===0">
            <el-form label-width="80" model="userVerify">
              <el-form-item label="邮箱" v-show="userVerify.manner==='email'">
                <el-input v-model="userVerify.key"></el-input>
              </el-form-item>
              <el-form-item label="手机号" v-show="userVerify.manner==='phone'">
                <el-input v-model="userVerify.key"></el-input>
              </el-form-item>
              <el-form-item label="验证方式">
                <el-radio-group v-model="userVerify.manner">
                  <el-radio-button label="手机" value="phone"/>
                  <el-radio-button label="邮箱" value="email"/>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="step===1">
            <el-form label-width="80">
              <el-form-item label="验证码">
                <el-input v-model="userVerify.value"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div v-show="step===2 && verifyResult">
            <el-form-item label="新密码">
              <el-input v-model="userVerify.password"></el-input>
            </el-form-item>
          </div>
          <div v-show="step===2 && !verifyResult">
            <el-result
                icon="error"
                title="验证失败"
                sub-title="是否重新验证？"
            >
              <template #extra>
                <el-button type="primary" @click="again">确定</el-button>
              </template>
            </el-result>
          </div>
          <hr/>
          <div class="item_center son_center">
            <button class="button" @click="toLoginView">返回登录</button>
            <button class="button" @click="last">上一步</button>
            <button class="button" @click="next" :disabled="step===2 && !verifyResult">下一步</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {reactive, ref} from 'vue'

const router = useRouter()
let step = ref(0)
let verifyResult = ref(false)

let userVerify = reactive({
  manner: 'phone',
  key: '',
  value: '',
  password: ''
})

function toLoginView() {
  router.push('/login')
}

function last() {
  if (step.value !== 0) {
    step.value -= 1
  }
}

function again() {
  step.value -= 1
}

function next() {
  if (step.value !== 4) {
    step.value += 1
  }
}
</script>

<style scoped>
.body_box {
  width: 100%;
  height: 720px;
  background-image: url("../assets/bj.png");
  display: flex;
  justify-content: center;
  align-items: center;
}

.from_box {
  width: 50%;
  background-color: white;
  border-radius: 3mm;
  height: 75%;
}

/*子元素纵向排列*/
.zongxiang {
  display: flex;
  flex-direction: column;
  height: 300px;
}

.item_center {
  width: 500px;
  align-self: center
}

.son_center {
  display: flex;
  justify-content: center;
}
</style>
